<template>
	<view class="content">
		<view class="navbar" :style="{position:headerPosition,top:headerTop}">
			<view class="nav-item" :class="{current: filterIndex === 0}" @click="tabClick(0)">
				人气排序
			</view>
			<view class="nav-item" :class="{current: filterIndex === 2}" @click="tabClick(2)">
				<text>价格</text>
				<view class="p-box">
					<text :class="{active: priceOrder === 1 && filterIndex === 2}" class="yticon icon-shang"></text>
					<text :class="{active: priceOrder === 2 && filterIndex === 2}" class="yticon icon-shang xia"></text>
				</view>
			</view>

			<view class="nav-item" :class="{current: filterIndex === 1}" @click="tabClick(1)">
				筛选商品
			</view>

		</view>

		<ListOther :goodsList='goodsList'></ListOther>
		<uni-load-more :status="loadingType"></uni-load-more>
		<uni-drawer :visible="drawer" mode="right" @close="closedd">
			<view style="padding:0 30upx;">
				<view class="uni-title condition-title">
					价格
				</view>
				<view class="condition">
					<input type="number" placeholder="最低价" placeholder-style="font-size:13px;color:#5C5C5C" v-model="lowPrice">
					<view class="line"></view>
					<input type="number" placeholder="最高价" placeholder-style="font-size:13px;color:#5C5C5C" v-model="heightPrice">
				</view>
			</view>
			<view style="padding:0 30upx;">
				<view class="uni-title condition-title">品牌</view>
				<view class="condition">
					<view class="pp-list" v-for="cate in ppList" :key="cate.id" :class="cate.isSelected?'active':''" @click="Selected(cate)">{{cate.name}}</view>
					
				</view>
			</view>
			<view style="padding:0 30upx;">
				<view class="uni-title condition-title">全部分类</view>
				<view class="condition">
					<view class="pp-list" v-for="cate in Allcate" :key="cate.id" :class="cate.isSelected?'active':''" @click="Selected(cate)">{{cate.cName}}</view>
					
				</view>
			</view>
			<view style="padding:0 30upx;">
				<view class="submit">
					<view class="btn" @click="refreshData">重置</view>
					<view class="btn active" @click="submitData">提交</view>
				</view>
			</view>
		</uni-drawer>


	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import ListOther from '@/components/list/listOther.vue';
	import uniDrawer from '@/components/uni-drawer/uni-drawer.vue'
	export default {
		components: {
			uniLoadMore,
			ListOther,
			uniDrawer
		},
		data() {
			return {
				cateMaskState: 0, //分类面板展开状态
				headerPosition: "fixed",
				headerTop: "0px",
				loadingType: 'more', //加载更多状态
				filterIndex: 0,
				cateId: '', //已选三级分类id
				ppid: '', //品牌id
				priceOrder: 0, //1 价格从低到高 2价格从高到低
				cateList: [],
				goodsList: [],
				current: 1,
				drawer: false,
				ppList:[],
				Allcate:[],
				did:0,
				lowPrice:'',
				heightPrice:'',
				price:''
			};
		},

		onLoad(options) {
			// #ifdef H5
			this.headerTop = document.getElementsByTagName('uni-page-head')[0].offsetHeight + 'px';
			// #endif
			this.cateId = options.categoryid;
			// uni.setNavigationBarTitle({
			// 	// title: options.name
			// })
			this.loadCateList(1);
			this.loadData();
			
			
			this.$Request.post4(
				this.$api.httpApi.cate.brand, {
					// "brandClass": this.cateId
				}
			).then(res => {
				if (res.code == 1) {
					this.ppList = res.data
			
				}
			})
			this.Allcate = this.$SysCache.get("cateData")
		},
		onPageScroll(e) {
			//兼容iOS端下拉时顶部漂移
			if (e.scrollTop >= 0) {
				this.headerPosition = "fixed";
			} else {
				this.headerPosition = "absolute";
			}
		},
		//下拉刷新
		onPullDownRefresh() {
			this.loadData('refresh');
		},
		//加载更多
		onReachBottom() {
			this.loadData();
			
		},
		methods: {
			//加载分类
			async loadCateList(sid) {
				this.did = sid
				let orders = []
				if (sid == 0) {
					let ord = {
						fieldname: "iOrder",
						direction: "asc"
					}
					orders.push(ord)

				} else if (sid == 1) {
					let ord = {
						fieldname: "fSalePrice",
						direction: "asc"
					}
					orders.push(ord)
				} else if (sid == 2) {
					let ord = {
						fieldname: "fSalePrice",
						direction: "desc"
					}
					orders.push(ord)
				}
				this.$Request.post(
					this.$api.httpApi.search.search + "&token=" + this.$SysCache.get('token'), {
						queryCondition: {
							order: orders,
							pageindex: this.current,
							pagesize: 12,
							where: [{
								fieldname: "categoryid",
								valuefrom: this.cateId
							},{
								fieldname: "brand_id",
								valuefrom: this.ppid
							},{
								fieldname: "saleprice",
								valuefrom: this.lowPrice,
								valueto:this.heightPrice
							}]
						}
					}
				).then(res => {
					if (res.code == 200) {
						this.goodsList = res.data.data
					}
				})
				
				
				// this.cateList = cateList;
			},
			//加载商品 ，带下拉刷新和上滑加载
			async loadData(type = 'add', loading) {
				//没有更多直接返回
				if (type === 'add') {
					if (this.loadingType === 'nomore') {
						return;
					}
					this.loadingType = 'loading';
				} else {
					this.loadingType = 'more'
				}

				// let goodsList = await this.$api.json('goodsList');



				if (type === 'refresh') {
					this.goodsList = [];
				}
				//筛选，测试数据直接前端筛选了
				if (this.filterIndex === 1) {
					// goodsList.sort((a,b)=>b.sales - a.sales)
				}
				if (this.filterIndex === 2) {
					// goodsList.sort((a,b)=>{
					// 	if(this.priceOrder == 1){
					// 		return a.price - b.price;
					// 	}
					// 	return b.price - a.price;
					// })
				}

				// this.goodsList = this.goodsList.concat(goodsList);

				//判断是否还有下一页，有是more  没有是nomore(测试数据判断大于20就没有了)
				this.loadingType = this.goodsList.length > 20 ? 'nomore' : 'more';
				if (type === 'refresh') {
					if (loading == 1) {
						uni.hideLoading()
					} else {
						uni.stopPullDownRefresh();
					}
				}
			},
			//筛选点击
			tabClick(index) {
				this.current == 1
				if (index == 1) {
					this.drawer = true
				}
				if (this.filterIndex === index && index !== 2) {

					return;
				}
				this.filterIndex = index;
				if (index === 2) {
					this.priceOrder = this.priceOrder === 1 ? 2 : 1;
					this.loadCateList(this.priceOrder)

				} else {
					this.loadCateList(0)
					this.priceOrder = 0;
				}
				uni.pageScrollTo({
					duration: 300,
					scrollTop: 0
				})

				uni.showLoading({
					title: '正在加载'
				})
				this.loadData('refresh', 1);
			},
			closedd() {
				this.drawer = false
			},
			//显示分类面板
			toggleCateMask(type) {
				let timer = type === 'show' ? 10 : 300;
				let state = type === 'show' ? 1 : 0;
				this.cateMaskState = 2;
				setTimeout(() => {
					this.cateMaskState = state;
				}, timer)
			},
			Selected(item){
				item.isSelected = !item.isSelected
			},
			refreshData(){
				this.lowPrice = ''
				this.heightPrice = ''
				for(const i of this.ppList){
					i.isSelected = false
				}
				for(const s of this.Allcate){
					s.isSelected = false
				}
			},
			submitData(){
				var str = []
				var stu = []
				var sty = []
				sty.push(this.lowPrice)
				sty.push(this.heightPrice)
				for(const d of this.Allcate){
					if(d.isSelected){
						str.push(d.id)
					}
				}
				for(const d of this.ppList){
					if(d.isSelected){
						stu.push(d.id)
					}
				}
				this.cateId = str.join(",")
				this.ppid = stu.join(",")
				this.price = this.heightPrice
				this.loadCateList(this.sid)
				this.closedd()
			}

		},
		onNavigationBarButtonTap: async function(e) {
				uni.navigateTo({
					url: `/pages/search/search`
				})
		}
	}
</script>

<style lang="scss">
	page,
	.content {
		background: #F2F2F2;
	}

	.content {
		padding-top: 40upx;
	}

	.navbar {
		position: fixed;
		left: 0;
		top: var(--window-top);
		display: flex;
		width: 100%;
		height: 80upx;
		background: #000;
		box-shadow: 0 2upx 10upx rgba(0, 0, 0, .06);
		border-top: 1px solid rgba(238, 238, 238, .16);
		z-index: 10;

		.nav-item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 30upx;
			color: #fff;
			position: relative;

			&.current {
				color: #fff;

				&:after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 120upx;
					height: 0;
					border-bottom: 4upx solid #4DC897;
				}
			}
		}

		.p-box {
			display: flex;
			flex-direction: column;

			.yticon {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 30upx;
				height: 14upx;
				line-height: 1;
				margin-left: 4upx;
				font-size: 26upx;
				color: #fff;

				&.active {
					color: #4DC897;
				}
			}

			.xia {
				transform: scaleY(-1);
			}
		}

		.cate-item {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			width: 80upx;
			position: relative;
			font-size: 44upx;

			&:after {
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				border-left: 1px solid #ddd;
				width: 0;
				height: 36upx;
			}
		}
	}

	/* 分类 */
	.cate-mask {
		position: fixed;
		left: 0;
		top: var(--window-top);
		bottom: 0;
		width: 100%;
		background: rgba(0, 0, 0, 0);
		z-index: 95;
		transition: .3s;

		.cate-content {
			width: 630upx;
			height: 100%;
			background: #fff;
			float: right;
			transform: translateX(100%);
			transition: .3s;
		}

		&.none {
			display: none;
		}

		&.show {
			background: rgba(0, 0, 0, .4);

			.cate-content {
				transform: translateX(0);
			}
		}
	}

	.cate-list {
		display: flex;
		flex-direction: column;
		height: 100%;

		.cate-item {
			display: flex;
			align-items: center;
			height: 90upx;
			padding-left: 30upx;
			font-size: 28upx;
			color: #555;
			position: relative;
		}

		.two {
			height: 64upx;
			color: #303133;
			font-size: 30upx;
			background: #f8f8f8;
		}

		.active {
			color: $base-color;
		}
	}

	.condition-title {
		font-size: 32upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(55, 55, 55, 1);
		margin-top: 78upx;
	}

	.condition {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-top: 47upx;
		flex-wrap: wrap;

		.line {
			width: 74upx;
			height: 1upx;
			border: 1upx solid rgba(229, 229, 229, 1);
			margin: 0 31upx;
		}

		input {
			width: 176upx;
			height: 84upx;
			background: rgba(245, 245, 245, 1);
			border-radius: 42upx;
			display: inline-block;
			text-align: center;
			font-size: 28upx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333;


		}

		.pp-list {
			width: 176upx;
			height: 84upx;
			background: rgba(245, 245, 245, 1);
			border-radius: 42upx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28upx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(92, 92, 92, 1);
			margin: 0 22upx 22upx 0;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			padding: 0 10upx;

			&:nth-child(3n) {
				margin-right: 0;
			}

			&.active {
				background: #4DC897;
				color: #fff;
				border: 1upx solid #4DC897;
			}
		}


	}

	.submit {
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin-top: 50upx;

		.btn {
			width: 224upx;
			height: 78upx;
			border: 1upx solid rgba(191, 191, 191, 1);
			border-radius: 39upx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 30upx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(92, 92, 92, 1);

			&.active {
				background: #4DC897;
				color: #fff;
				border: 1upx solid #4DC897;
			}
		}
	}
</style>
